<template>
  <div class="bg-white">
    <Card>
      <Row>
        <Col span="22">
          <SearchForm @get="handleSearch"></SearchForm>
        </Col>
        <Col span="2">
          <div class="btn-wrapper">
            <Button class="editable-add-btn" type="primary" @click="handleAdd"
              ><template #icon><PlusOutlined /></template>创建工单</Button
            >
          </div>
        </Col>
      </Row>
      <br />
      <Table
        sticky
        :bordered="true"
        :dataSource="dataSource"
        :columns="eventTenantColumns"
        :pagination="false"
        :loading="loading"
        :scroll="scroll"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'action'">
            <Popconfirm
              v-if="dataSource.length"
              title="确认撤回吗？"
              @confirm="cancel(record)"
              ok-text="确定"
              cancel-text="取消"
            >
              <a>撤回</a>
            </Popconfirm>
            <Divider type="vertical" />
            <Popconfirm
              v-if="dataSource.length"
              title="确认驳回吗？"
              @confirm="reject(record)"
              ok-text="确定"
              cancel-text="取消"
            >
              <a>驳回</a>
            </Popconfirm>
            <Divider type="vertical" />
            <a @click="finish(record)">完成</a>
          </template>
        </template>
      </Table>
      <br />
      <Pagination
        show-size-changer
        v-model:current="current"
        v-model:pageSize="pageSize"
        :total="total"
        :show-total="(total) => `共 ${total} 条`"
        @showSizeChange="onShowSizeChange"
      />
    </Card>
    <CreateShift ref="create" @submitSuccess="getDataSource" />
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { Card, Table, Button, Pagination, Row, Col, Divider, Popconfirm, message } from 'ant-design-vue';
import SearchForm from '/@/views/work-order/workOrderManagement/eventManagementTenant/component/SearchForm.vue';
import CreateShift from '/@/views/work-order/workOrderManagement/eventManagementTenant/component/CreateShift.vue';
import { eventTenantColumns } from './data';
import {
  cancelShift,
  finishShift,
  rejectShift,
} from '/@/api/work-order/workOrderManagement/eventManagementTenant/eventMgtTenant';
import { ShiftTableParams } from '/@/api/work-order/workOrderManagement/eventManagementTenant/model/eventMgtTenantModel';
const loading = ref(true);
const scroll = ref<undefined | object>({ x: 1300 });
let dataSource = ref();

let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
let params = {
  current: current.value,
  size: pageSize.value,
} as ShiftTableParams;

// let data = await getShiftTable(params);
const getDataSource = async () => {
  try {
    let data = {
      current: 1,
      pages: 10,
      records: [
        {
          appName: '',
          componentName: '',
          createdTime: '',
          curHandler: '',
          description: '',
          handleSLA: {
            slaid: 0,
            slaname: '',
          },
          id: 0,
          lastUpdateTime: '',
          levelStr: '',
          name: '',
          responseSLA: {
            slaid: 0,
            slaname: '',
          },
          statusStr: '',
          worksheetUid: '',
        },
      ],
      size: 10,
      total: 10,
    };
    dataSource.value = data.records;
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};
getDataSource();
const onShowSizeChange = (current: number, pageSize: number) => {
  params.size = pageSize;
  params.current = current;
  getDataSource();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { x: 1300, y: 500 };
  } else {
    scroll.value = undefined;
  }
  params.size = pageSize.value;
});
watch(current, () => {
  params.current = current.value;
  getDataSource();
});
let temp = ref();
const handleSearch = (searchParam) => {
  temp.value = searchParam;
  params = {
    current: current.value,
    size: pageSize.value,
  };
  getDataSource();
};

const cancel = async (record) => {
  let res = await cancelShift({ userId: record.curHandler, worksheetId: record.worksheetUid });
  if (res) {
    message.success('撤回成功');
  }
  getDataSource();
};

const reject = async (record) => {
  let res = await rejectShift({ userId: record.curHandler, worksheetId: record.worksheetUid });
  if (res) {
    message.success('驳回成功');
  }
  getDataSource();
};

const finish = async (record) => {
  let res = await finishShift({ userId: record.curHandler, worksheetId: record.worksheetUid });
  if (res) {
    message.success('驳回成功');
  }
  getDataSource();
};

const create = ref();
const handleAdd = () => {
  create.value.openCreate();
};
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
.btn-wrapper {
  float: right;
}
</style>
